<template>
    <div>
        <a-modal :title="title" centered v-model:visible="visible" width="800px" cancelText="取消" okText="保存" @ok="handleOk">
            <div>
                <a-form layout="inline" :model="form" ref="ruleFormRef" :rules="rules">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="供应商反馈" name="feedBack">
                                <a-select placeholder="请选择" v-model:value="form.feedBack" @change="selectChange">
                                    <a-select-option v-for="item of providerOptions" :key="item"> {{ item }} </a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-col>
                        <a-col :span="12">
                            <a-form-item label="修复版本" v-if="form.feedBack === '修改' && !form.id">
                                <a-textarea v-model:value="form.repairVersion" placeholder="请输入版本限制150个字" :maxlength="150" auto-size />
                            </a-form-item>
                        </a-col>
                        <a-col :span="24">
                            <a-form-item :label="form.feedBack === '修改' ? '修改方案' : '跟进内容'" name="modifyScheme">
                                <a-textarea showCount :maxlength="300" auto-size v-model:value="form.modifyScheme" />
                                <div class="margin-t-8" v-if="form.feedBack === '修改'">
                                    <a-checkbox v-model:checked="form.createRequire">以修改方案为内容新建关联产品需求</a-checkbox>
                                    <div class="caption-font-color">提示：您可以在产品需求模块中编辑或删除产品需求</div>
                                </div>
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import store from '@/store';
import { message } from 'ant-design-vue';
import { defineComponent, reactive, ref, toRefs } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const ruleFormRef = ref();
        const state = reactive({
            form: {
                id: null,
                feedBack: '修改',
                modifyScheme: '',
                createRequire: true,
                repairVersion: null
            },
            rules: {
                feedBack: [{ required: true, message: '供应商反馈不能为空', trigger: 'blur' }],
                modifyScheme: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
            },
            visible: false,
            title: '新增跟进',
            providerOptions: ['跟进中', '待明确', '无需修改', '不修改', '修改']
        });
        const open = (id: number | undefined) => {
            if (id) {
                state.title = '编辑跟进';
                getDetailData(id);
            } else {
                state.form = {
                    id: null,
                    feedBack: '修改',
                    modifyScheme: '',
                    createRequire: true,
                    repairVersion: null
                };
            }
            state.visible = true;
        };
        const getDetailData = async (id: number) => {
            const query = { id };
            const { success, moule } = await api.trackInformationModel.findById(query);
            if (success) {
                Object.keys(state.form).forEach((key) => {
                    state.form[key] = moule[key];
                });
            }
        };
        const handleOk = () => {
            const { id, requestSystem } = props.detail;
            const { empId: createUserEmpId, name: createUserName } = store.getters.userInfo.employeeDTO;
            ruleFormRef.value.validate().then(async () => {
                const query = {
                    ...state.form,
                    createUserEmpId,
                    createUserName,
                    requireId: id,
                    system: +requestSystem
                };
                const { success } = await api.trackInformationModel.save(query);
                if (success) {
                    state.visible = false;
                    message.success('创建成功');
                    emit('success');
                }
            });
        };
        const selectChange = (val) => {
            state.form.createRequire = val === '修改';
        };
        return {
            ...toRefs(state),
            open,
            ruleFormRef,
            handleOk,
            getDetailData,
            selectChange
        };
    }
});
</script>

<style scoped>
</style>